<template>
  <a-select :defaultValue="selectedTimeZoneVal" @change="selectChange($event)">
    <a-select-option v-for="item in timeZones" :key="item.value" :value="item.value">{{
      item.name
    }}</a-select-option>
  </a-select>
</template>

<script lang="ts">
  //import vuePlugin from '@vitejs/plugin-vue';
  import { AppComponentBase } from '/@/shared/component-base';
  import { NameValueDto, TimingServiceProxy } from '/@/shared/service-proxies';
  import { defineComponent } from 'vue';

  export default defineComponent({
    name: 'timezone-combo',
    mixins: [AppComponentBase],
    props: ['selectedTimeZone', 'defaultTimezoneScope'],
    emits: ['selectedTimeZoneChange'],
    data() {
      return {
        timingService: new TimingServiceProxy(),
        timeZones: NameValueDto[''],
        selectedTimeZoneVal: this.selectedTimeZone,
      };
    },
    mounted() {
      this.timingService.getTimezones(this.defaultTimezoneScope).then((result) => {
        this.timeZones = result.items;
      });
    },
    methods: {
      selectChange(val) {
        this.$emit('selectedTimeZoneChange', val);
      },
    },
    watch: {},
  });
</script>

<style scoped></style>
